import React from 'react';
import classNames from 'classnames';
import Icon from './Icon';
import FileButton from './FileButton';
import { noop } from '../utils';

function renderUploadingState(props) {
    const {
        listType,
        file = {},
        breakpoint,
        onPause = noop
    } = props;

    const notUploading = ({
        uploaded: true,
        paused: true,
        error: true
    })[file.state];

    if (notUploading) {
        return null;
    }

    if (breakpoint) {
        return (
            <FileButton
                listType={listType}
                file={file}
                name="pause"
                prefixCls="file-thumb_state-icon"
                onClick={e => {
                    onPause(file, e);
                }}
            >
                <Icon type="loading" className="rotating" />
            </FileButton>
        );
    }

    return (
        <span className={classNames([
            'file-thumb_state-icon',
            `file-thumb_state-icon--${listType}`,
        ])}>
            <Icon type="loading" className="rotating" />
        </span>
    );
}
function renderPausedState(props) {
    const {
        listType,
        file = {},
        breakpoint,
        onContinue = noop
    } = props;

    if (file.state !== 'paused' || !breakpoint) {
        return null;
    }

    return (
        <FileButton
            listType={listType}
            file={file}
            name="continue"
            prefixCls="file-thumb_state-icon"
            onClick={e => {
                onContinue(file, e);
            }}
        >
            <Icon type="pause" />
        </FileButton>
    );
}
function renderErrorState(props) {
    const {
        listType,
        file = {}
    } = props;

    if (file.state !== 'error') {
        return null;
    }

    return (
        <span className={classNames([
            'file-thumb_state-icon',
            `file-thumb_state-icon--${listType}`,
        ])}>
            <Icon type="errorFile" />
        </span>
    );
}
function renderUploadedState(props) {
    const {
        listType,
        file = {},
        onPreview = noop
    } = props;

    const href = file.url;

    if (file.state !== 'uploaded') {
        return null;
    }
    if (listType === 'text') {
        return (
            <span className={classNames([
                'file-thumb_state-icon',
                `file-thumb_state-icon--${listType}`,
            ])}>
                <Icon type="clip" />
            </span>
        );
    }
    const fileType = !file.type ? 'file' : file.type.toLowerCase().replace(/\/.*$/, '');
    const defaultTypes = {
        image: true,
        video: true,
        audio: true
    };

    if (fileType !== 'image') {
        return (
            <span className={classNames([
                'file-thumb_state-icon',
                `file-thumb_state-icon--${listType}`,
            ])}>
                <Icon type={defaultTypes[fileType] ? fileType : 'file'} />
            </span>
        );
    }

    return (
        <FileButton
            listType={listType}
            file={file}
            href={href}
            name="preview"
            prefixCls="file-thumb_image-wrap"
            onClick={e => {
                onPreview(file, e);
            }}
        >
            <img
                className={classNames([
                    'file-thumb_image',
                    `file-thumb_image--${listType}`,
                ])}
                src={file.preview}
                alt={file.name}
            />
        </FileButton>
    );
}

export default function FileThumb(props) {
    const {
        listType,
        file = {} ,
        breakpoint,
        onContinue = noop,
        onPause = noop,
        onPreview = noop
    } = props;

    return (
        <div className={classNames([
            'file-thumb',
            `file-thumb--${listType}`
        ])}>
            {renderUploadingState({ listType, file, breakpoint, onPause })}
            {renderPausedState({ listType, file, breakpoint, onContinue })}
            {renderErrorState({ listType, file })}
            {renderUploadedState({ listType, file, onPreview })}
        </div>
    );
}
